const canvas = document.createElement("canvas");
const W = 400;
const H = 400;
canvas.width = W;
canvas.height = H;
canvas.style.borderRadius = "100%";
canvas.style.border = "1px solid red";
document.body.appendChild(canvas);

const ctx = canvas.getContext("2d");
// 移动坐标原点到canvas中心
const x = canvas.width / 2;
const y = canvas.height / 2;
ctx.translate(x, y);
const radius = Math.min(x, y) - 2;

function drawCircle(ctx) {
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = "#00f";
  ctx.lineWidth = 2;
  ctx.arc(0, 0, radius, 0, 2 * Math.PI, false);
  ctx.stroke();
  ctx.restore();
}
function drawSM(ctx) {
  let w = 0,
    h = 0;
  for (let i = 0; i < 60; i++) {
    if (i % 5 === 0) {
      w = 4;
      h = 20;
      ctx.fillStyle = "#f00";
    } else {
      w = 2;
      h = 10;
      ctx.fillStyle = "#0f0";
    }

    ctx.save();
    ctx.beginPath();
    ctx.rotate((i * 6 * Math.PI) / 180);
    ctx.fillRect(-w / 2, -radius, w, h);
    ctx.restore();
  }
}
function drawT(ctx) {
  // for (let i = 0; i < 60; i += 5) {
  //   ctx.save();
  //   ctx.beginPath();
  //   ctx.rotate((i * 6 * Math.PI) / 180);
  //   if (i % 5 === 0) {
  //     ctx.fillStyle = "#aaa";
  //     ctx.font = "20px Arial";
  //     ctx.textAlign = "center";
  //     ctx.testBaseline = "middle";
  //     const s = i / 5;
  //     ctx.fillText(s === 0 ? 12 : s, 0, -radius + 40);
  //   }
  //   ctx.restore();
  // }

  for (let i = 0; i < 60; i += 5) {
    ctx.save();
    ctx.beginPath();
    ctx.rotate((i * 6 * Math.PI) / 180);

    // 通过另外一个辅助canvas调整数字
    const canvas2 = document.createElement("canvas");
    canvas2.width = 50;
    canvas2.height = 50;
    const ctx2 = canvas2.getContext("2d");
    ctx2.translate(canvas2.width / 2, canvas2.height / 2);
    ctx2.fillStyle = "#aaa";
    ctx2.font = "bold 20px Arial";
    ctx2.textAlign = "center";
    ctx2.textBaseline = "middle";
    // canvas2.style.border = "1px solid red";
    // document.body.appendChild(canvas2);

    if (i % 5 === 0) {
      const s = i / 5;
      ctx2.rotate((-i * 6 * Math.PI) / 180);
      ctx2.fillText(s === 0 ? 12 : s, 0, 0);
      ctx.drawImage(canvas2, -canvas2.width / 2, -radius + canvas2.height / 8);
    }
    ctx.restore();
  }
}
function drawPointer(w, h, rotate, color) {
  ctx.save();
  ctx.beginPath();
  ctx.rotate((rotate * Math.PI) / 180);
  ctx.moveTo(-w / 2, 0);
  ctx.lineTo(0, -h);
  ctx.lineTo(w / 2, 0);
  ctx.lineTo(0, h / 10);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
  ctx.restore();
}
function rotateClock() {
  // // 时针
  // drawPointer(20, radius - 90, 0, "#ccc");
  // // 分针
  // drawPointer(16, radius - 50, 90, "#333");
  // // 秒针
  // drawPointer(8, radius - 10, 180, "#f00");

  const date = new Date();
  // 时针
  const hour = date.getHours() + date.getMinutes() / 60;
  const hRad = (hour * 360) / 12;
  drawPointer(20, radius - 90, hRad, "#ccc");
  // 分针
  const minute = date.getMinutes() + date.getSeconds() / 60;
  const mRad = (minute * 360) / 60;
  drawPointer(16, radius - 50, mRad, "#555");
  // 秒针
  const second = date.getSeconds();
  const sRad = (second * 360) / 60;
  drawPointer(8, radius - 10, sRad, "#f00");
}
const flag = Math.random() > 0.5;
function tick() {
  ctx.clearRect(-x, -y, canvas.width, canvas.height);
  drawCircle(ctx);

  if (flag) {
    drawSM(ctx);
    drawT(ctx);
  } else {
    drawSecondScale(ctx);
    drawMinuteScale(ctx);
    drawText(ctx);
  }

  rotateClock();

  ctx.save();
  ctx.beginPath();
  ctx.lineWidth = 8;
  ctx.arc(0, 0, 10, 0, 2 * Math.PI);
  ctx.strokeStyle = "#f00";
  ctx.stroke();
  ctx.fillStyle = "#888";
  ctx.fill();
  ctx.restore();

  requestAnimationFrame(tick);
}

tick();
// setInterval(tick, 1000);

function drawSecondScale(ctx) {
  ctx.strokeStyle = "#0f0";
  ctx.lineWidth = 2;
  for (let i = 0; i < 60; i++) {
    ctx.save();
    ctx.beginPath();
    // 6 度转一个刻度, 总共 60 个刻度格
    ctx.rotate((i * 6 * Math.PI) / 180);
    ctx.moveTo(0, -radius + 4);
    ctx.lineTo(0, -radius + 10);
    ctx.stroke();
    ctx.restore();
  }
}

function drawMinuteScale(ctx) {
  ctx.strokeStyle = "#f00";
  ctx.lineWidth = 2;
  for (let i = 0; i < 12; i++) {
    ctx.save();
    ctx.beginPath();
    // 30 度转一个刻度, 总共 12 个刻度格
    ctx.rotate((i * 30 * Math.PI) / 180);
    ctx.moveTo(0, -radius + 12);
    ctx.lineTo(0, -radius + 20);
    ctx.stroke();
    ctx.restore();
  }
}

function drawText(ctx) {
  const text = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
  ctx.save();
  ctx.beginPath();
  ctx.fillStyle = "#aaa";
  ctx.font = "bold 20px Arial";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  for (let i = 0; i < 12; i++) {
    // 30 度转一个刻度, 总共 12 个刻度格
    const deg = (i * 30 * Math.PI) / 180;
    const x = (radius - 34) * Math.cos(deg);
    const y = (radius - 34) * Math.sin(deg);
    ctx.fillText(text[i], x, y);
  }
  ctx.stroke();
  ctx.restore();
}
